window.addEventListener('load', function () {
    // 轮播图效果
    var focus = this.document.querySelector('.focus');
    var next = this.document.querySelector('.arrow-next');
    var prev = this.document.querySelector('.arrow-prev');
    var pics = this.document.querySelector('.pics');
    var circles = this.document.querySelector('.circles');
    var imgs = pics.querySelectorAll('img');

    // 1.鼠标经过轮播图，显示左右按钮
    focus.addEventListener('mouseenter', function () {
        next.style.display = 'block';
        prev.style.display = 'block';
        // 6.鼠标放置轮播图时，关闭自动播放
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function () {
        next.style.display = 'none';
        prev.style.display = 'none';
        // 5.鼠标未经过轮播图，自动播放
        timer = setInterval(() => {
            // 手动触发
            next.click();
        }, 2000);
    })

    // 2.小圆圈跟随索引变化
    function circleCurrent() {
        for (let i = 0; i < circles.children.length; i++) {
            circles.children[i].className = '';
        }
        circles.children[count].className = 'current';
    }

    // 3.点击小圆圈，播放相应图片
    // 自动生成小圆圈模块内容
    for (let i = 0; i < imgs.length; i++) {
        let li = this.document.createElement('li');
        circles.appendChild(li);
        li.setAttribute('data-index', i);

        // 注册鼠标经过事件
        li.addEventListener('mouseenter', function () {
            // 点击变为选中状态
            circleCurrent();
            // 更改图片和自身全局索引
            count = parseInt(this.getAttribute('data-index'));
            // 动画移动图片所在 ul
            animate(pics, -this.getAttribute('data-index') * imgs[0].clientWidth);
        })
    }
    circles.children[0].className = 'current';

    // 4.点击按钮图片无缝滚动
    // 图片和小圆圈计数
    var count = 0;
    // 节流阀
    var flag = true;
    // 为了无缝效果，克隆第一张图片，放到轮播图最后
    var liFirst = pics.children[0].cloneNode(true);
    pics.appendChild(liFirst);

    // 左箭头
    prev.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (count == 0) {
                count = imgs.length;
                pics.style.left = -count * imgs[0].clientWidth + 'px';
            }

            count--;
            animate(pics, -count * imgs[0].clientWidth, function () {
                flag = true;
            });
            circleCurrent();
        }
    })
    // 右箭头
    next.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 图片计数是从 1 2 3 4
            // 小圆圈计数是从 1 2 3 0
            count++;
            if (count == imgs.length) {
                animate(pics, -count * imgs[0].clientWidth, function () {
                    pics.style.left = '0';
                    flag = true;
                });
                count = 0;
                circleCurrent();
                return;
            }

            circleCurrent();
            animate(pics, -count * imgs[0].clientWidth, function () {
                flag = true;
            });
        }
    })

    // 5.鼠标未经过轮播图，自动播放
    var timer = setInterval(() => {
        // 手动触发
        next.click();
    }, 2000);
})